<template>
	<view class="w-flex-col page space-y-32">
		<view class="w-flex-row w-items-center space-x-16">
			<view class="w-flex-row w-items-center w-flex-auto search space-x-12">
				<image class="image" src="/static/my_wifi/d3559409ed577b8d0afe2455ce3d2cf2.png" />
				<text class="text"></text><input type="text" placeholder="请输入店铺名称" v-model="search">
			</view>
			<text class="font_1 text_2" @tap="getSearch">搜索</text>
		</view>
		<uv-empty mode="data" icon="/static/my_wifi/nodata.png" marginTop="50%" :show="list.length <=0 " iconSize="20"></uv-empty>
		<button class="btn" type="default" plain size="mini" @tap="flsh" v-show="list.length <=0 ">刷新</button>
		<view class="w-flex-col space-y-32" v-show="list.length">
			<view class="w-flex-col list-item section" :key="i" v-for="(item, i) in list">
				<view class="w-flex-row w-justify-between w-items-start">
					<view class="w-flex-col space-y-26">
						<text class="font_2">{{item.merchant_name}}</text>
						<text class="font_3">{{item.address}}</text>
					</view>
					<view class="w-flex-col space-y-26">
						<text class="font_2">{{item.get_user.nick_name}}</text>
					</view>
				</view>
				<view class="w-flex-row w-justify-end group_2 space-x-12">
					<view class="w-flex-col w-justify-start w-items-center text-wrapper"><text class="font_1"
							@tap="checkShop(item.id, i)">审核</text></view>
					<view class="w-flex-col w-justify-start w-items-center text-wrapper_3"><text class="font_5"
							@tap="del(item.id, i)">删除</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 加载空组件
	import uEmpty from "@/uni_modules/uv-empty/components/uv-empty/uv-empty.vue";
	export default {
		components: {
			uEmpty
		},
		data() {
			return {
				list: [],
				page: 1,
				search: '',
				next: true
			};
		},
		onLoad() {
			uni.showLoading({
				title: '正在加载...',
			});
		},
		onShow() {
			this.getList()
		},
		onReachBottom() {
			if (this.next) {
				uni.showLoading({
					title: '正在加载...',
				});
				this.getList()
			}
		},
		methods: {
			checkShop(id, i){
				uni.showModal({
					title: '提示',
					content: '审核当前店铺',
				
					success: res => {
						if (res.confirm) {
							// console.log('用户点击确定');
							this.$http.post('checkMerchant', {
								id:id
							}).then(res => {
								uni.showToast({
									icon:'none',
									title:res.data.msg
								})
								this.list.splice(i, 1);
							}).catch(err => {
							
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			del(id, i) {
				uni.showModal({
					title: '提示',
					content: '确定删除当前店铺吗？',

					success: res => {
						if (res.confirm) {
							// console.log('用户点击确定');
							this.$http.post('merchantDelte', {
								id: id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
								this.list.splice(i, 1);
							}).catch(err => {

							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getList() {
				this.$http.get('checkMerchantList', {
					params: {
						search: this.search,
						page: this.page
					}
				}).then(res => {
					this.list = this.list.concat(res.data.data.data)
					// console.log(res.data.data.data.length)
					// 没有数据并且不是查询
					if (res.data.data.data.length <= 0) {
						this.next = false
					} else {
						this.page += 1
					}
					uni.hideLoading()
				}).catch(err => {

				})
			},
			getSearch() {
				uni.showLoading({
					title: '搜索中...',
				});
				this.page = 1
				this.list = []
				this.getList()
			},
			flsh(){
				uni.showLoading({
					title: '获取数据中...',
				});
				this.getList()
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 52rpx 28rpx 86rpx 32rpx;
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		
		.btn{
			margin-top: 50rpx;
			border: solid 1px #52a1f721;
			background-color: #82c6f417;
			color: #97a1b7;
		}

		.space-x-16 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 32rpx;
			}

			.search {
				padding: 20rpx 40rpx 16rpx;
				background-color: #eeeeee;
				border-radius: 30rpx;
				height: 72rpx;
				border: solid 2rpx #eeeeee;

				.image {
					width: 32rpx;
					height: 32rpx;
				}

				.text {
					color: #a6a6a6;
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					line-height: 26rpx;
				}
			}

			.text_2 {
				color: #000000;
			}
		}

		.space-x-12 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 24rpx;
			}
		}

		.font_1 {
			font-size: 32rpx;
			font-family: SourceHanSansCN;
			line-height: 30rpx;
			color: #fff;
		}
	}

	.space-y-32 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 64rpx;
		}

		.list-item {
			padding: 8rpx 16rpx 8rpx 52rpx;
			background-color: #fff;
			padding-bottom: 20rpx;
			border-radius: 15rpx;

			.space-y-26 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 52rpx;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: Roboto;
					line-height: 33rpx;
					color: #000;
				}
			}

			.group {
				width: 233rpx;

				.section_2 {
					background-image: linear-gradient(268.3deg, #2e74ff 19.7%, #387aff 107.4%);
					height: 12rpx;
				}

				.section_3 {
					padding-top: 32rpx;
					background-image: url('/static/my_wifi/57d7200fb21c8ad9ca0861528fa223cb.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.image_2 {
						width: 88rpx;
						height: 14rpx;
					}

					.image-wrapper {
						padding: 16rpx 0 32rpx;
						background-image: url('/static/my_wifi/b62fb3285864eccb7241dd7737693b45.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}

				.space-y-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 16rpx;
					}
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: Roboto;
				line-height: 22rpx;
				color: #ffffff;
			}

			.text_3 {
				margin-top: 16rpx;
			}

			.group_2 {
				margin-top: 32rpx;
				padding-left: 116rpx;
				padding-right: 8rpx;

				.text-wrapper {
					padding: 16rpx 0;
					background: radial-gradient(circle, #22b14C, #22b14C);
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
				}

				.text-wrapper_2 {
					padding: 16rpx 0;
					background-color: #fcddaf;
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
					border: solid 2rpx #fca831;

					.font_4 {
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
						color: #fca831;
					}
				}

				.text-wrapper_3 {
					padding: 16rpx 0;
					background-color: #f21818;
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
					border: solid 2rpx #f21818;

					.font_5 {
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
						color: #ffffff;
					}
				}
			}
		}

		.section {
			margin-right: 4rpx;
			padding-top: 50rpx;
		}
	}

	.space-y-32 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 64rpx;
		}

		.list-item {
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: 6rpx 6rpx 6rpx 6rpx #eee;

			.space-y-26 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 52rpx;
				}

				.font_2 {
					font-size: 28rpx;
					font-family: Roboto;
					line-height: 33rpx;
					color: #000;
				}
			}

			.group {
				width: 233rpx;

				.section_2 {
					background-image: linear-gradient(268.3deg, #2e74ff 19.7%, #387aff 107.4%);
					height: 12rpx;
				}

				.section_3 {
					padding-top: 32rpx;
					background-image: url('/static/my_wifi/57d7200fb21c8ad9ca0861528fa223cb.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.image_2 {
						width: 88rpx;
						height: 14rpx;
					}

					.image-wrapper {
						padding: 16rpx 0 32rpx;
						background-image: url('/static/my_wifi/b62fb3285864eccb7241dd7737693b45.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}

				.space-y-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 16rpx;
					}
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: Roboto;
				line-height: 22rpx;
				color: #000;
			}

			.text_3 {
				margin-top: 16rpx;
			}

			.group_2 {
				margin-top: 32rpx;
				padding-left: 116rpx;
				padding-right: 8rpx;

				.text-wrapper {
					padding: 16rpx 0;
					background-color: #8eb6fc;
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
					border: solid 2rpx #8eb6fc;
				}

				.text-wrapper_2 {
					padding: 16rpx 0;
					background-color: #fcddaf;
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
					border: solid 2rpx #fca831;

					.font_4 {
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
						color: #fca831;
					}
				}

				.text-wrapper_3 {
					padding: 16rpx 0;
					background-color: #f21818;
					border-radius: 10rpx;
					width: 148rpx;
					height: 64rpx;
					border: solid 2rpx #f21818;

					.font_5 {
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
						color: #ffffff;
					}
				}
			}
		}

		.section {
			margin-right: 4rpx;
			padding-top: 40rpx;
		}
	}
</style>